<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>
            <button @click="test1">请求</button>
            <button @click="get1">get请求</button>
            <button @click="get2">get请求</button>
            <button @click="get3">get请求</button>
        </p>
        <p>
            <button @click="post1">post请求</button>
            <button @click="post2">post请求</button>
        </p>
        <p>
            <button @click="json">json请求</button>
        </p>
        <div>{{msg}}</div>
    </div>
    <script>
        axios.defaults.baseURL = 'https://www.baidu.com/';
        const url = 'http://127.0.0.1:8080/';
        const vue = new Vue({
            el: '#app',
            data: {
                msg: ''
            },
            // get和delete类似，post和put类似
            methods: {
                handle: function(promise) {
                    promise.then(data => this.msg = data.data);
                },
                test1: function() {
                    axios.get(url + 'test1')
                        .then(data => this.msg = data.data);
                },
                get1: function() {
                    axios.get(url + 'books?id=123')
                        .then(data => this.msg = data.data);
                },
                get2: function() {
                    axios.get(url + 'books/456')
                        .then(data => this.msg = data.data);
                },
                get3: function() {
                    this.handle(axios.get(url + 'books', {
                        params: {
                            id: 789,
                        }
                    }));
                },
                post1: function() {
                    const params = new URLSearchParams();
                    params.append('uname', 'zhangsan');
                    params.append('pwd', 111);
                    this.handle(axios.post(url + 'books2', params));
                },
                post2: function() {
                    this.handle(axios.post(url + 'books3', {
                        uname: 'lisi',
                        pwd: 123456
                    }));
                },
                json: function() {
                    axios.post(url + 'json', {
                            uname: '王五',
                            pwd: 12345678
                        })
                        .then(res => this.msg = res.data.uname + ', ' + res.data.pwd)
                }
            },
            mounted: function() {
                console.log('生命周期：mounted');
            },
        });
    </script>
</body>

</html>